<template>
	<div>
		<div style="width:400px">
			<el-form :model="formData" :rules="rules" label-width="80px">
				<el-row :gutter="30">
					<el-col>
						<el-form-item label="角色名称" prop="rolename">
							<el-input v-model="formData.rolename"></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="角色简介" prop="desc">
							<el-input type="textarea" :rows="5" v-model="formData.desc"></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="启用状态" prop="enable">
							<el-radio-group v-model="formData.enable">
								<el-radio  :label="1">启用</el-radio>
								<el-radio  :label="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="可用权限">
							<div>
								<el-checkbox @change="handleAllCheckChange">全部</el-checkbox>
							</div>
							<el-tree :default-checked-keys="selectRights"  ref="trees" @check="getSelectNodes" @check-change="handleCheckChange"default-expand-all accordion node-key="mid" show-checkbox :data="menuList" :props="defaultProps"></el-tree>
						</el-form-item>
					</el-col>

					<el-col>
						<el-button type="primary" @click="handleSaveRight">保存</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script>
	import http from '@/utils/http';
	export default {
		data() {
			return {
				index: -1,
				roleid: -1,
				formData: {
					
				},
				drawerVisible: false,
				tableData: [],
				menuList:[],
				rules:{
					rolename:[{required:true,message:"请输入角色名称",trigger:'blur'}]
				},
				selectRights:[],
				defaultProps:{
					children:'children',
					label:'title'
				}
			}
		},
		mounted() {
			const params = new URLSearchParams(window.location.search);
			this.index = params.get("index");
			this.roleid = params.get("roleid");
			this.loadData();
			this.loadMenuList();
		},
		methods: {
			handleAllCheckChange(val){
				if(val){
					this.$refs.trees.setCheckedNodes(this.menuList);
					var list=this.$refs.trees.getCheckedNodes(false,true);
					list.forEach((item)=>{
						if(this.selectRights.indexOf(item.mid)==-1){
							this.selectRights.push(item.mid);
						}
					})
				}else{
					this.$refs.trees.setCheckedNodes([]);
					this.selectRights=[];
				}
			},
			handleCheckChange(data,checked,indeterminate){
				
			 
				
			},
			getSelectNodes(){
				var list=this.$refs.trees.getCheckedNodes(false,true);
				list.forEach((item)=>{
					if(this.selectRights.indexOf(item.mid)==-1){
						this.selectRights.push(item.mid);
					}
				})
				console.log(this.selectRights);
			},
			loadMenuList(){
				http.post("/api/admin/menus/list_by_page").then(res => {
					if (res.status == 200 && res.data.code) {
						this.menuList=res.data.list;
					}
				}).catch(error => {})
			},
			loadData() {
				const params = {
					roleid: this.roleid
				}
				http.post("/api/admin/roles/detail", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.formData= res.data.detail;
						this.selectRights=this.formData.permission;
						this.formData.enable=this.formData.enable=='1'?1:0;
					}
				}).catch(error => {})
			},
			handleSaveRight(){
				const params={
					roleid:this.formData.roleid,
					rolename:this.formData.rolename,
					enable:this.formData.enable? 1:0,
					permission:this.selectRights.join(",")
				}
				
				http.post("/api/admin/roles/update", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.$message.success({message:res.data.msg,duration:1500,showClose:true,onClose() {
							window.parent.postMessage("closedrawer");
						}});
						
					}
				}).catch(error => {})
				
				
			},
		},
	}
</script>

<style>
</style>